<script setup>
const props = defineProps({
  houseList: {
    type: Array,
    required: true,
  },
});
</script>

<template>
  <view class="rent-house">
    <navigator
      :url="`/pages/house/house?house=${house.id}`"
      class="rent-item horizontal"
      v-for="house in houseList"
      :key="house.id"
    >
      <image class="rent-image" :src="house.image" mode="aspectFill"></image>
      <view class="rent-info">
        <text class="rent-title">{{ house.specification }}</text>
        <view class="rent-name-price">
          <text class="rent-name">{{ house.name }}</text>
          <text class="rent-price">￥{{ house.price }}</text>
        </view>
        <text class="rent-desc">{{ house.address }}</text>
      </view>
    </navigator>
  </view>
</template>

<style scoped lang="scss">
.rent-house {
  display: flex;
  flex-direction: column; // 默认垂直排列
  margin-top: 30rpx;
  background-color: #f7f7f8;
  .rent-item.horizontal {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 15rpx;
    border: 2rpx solid #ddd; // 边框颜色
    background-color: #f9f9f9; // 背景颜色
    border-radius: 12rpx; // 圆角

    .rent-image {
      width: 230rpx;
      height: 230rpx;
      margin-right: 35rpx;
    }

    .rent-info {
      display: flex;
      flex-direction: column;
      .rent-title {
        font-size: 40rpx;
        font-weight: bold;
      }

      .rent-name-price {
        margin: 20rpx 0;
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;
        .rent-name {
          font-size: 32rpx;
        }

        .rent-price {
          font-size: 32rpx;
          color: #ff6347; // 橙色价格
        }
      }

      .rent-desc {
        font-size: 30rpx;
        color: #888;
        margin-top: 8rpx;
      }
    }
  }
}
</style>
